<template>
  <div class="warehouse">
    <h1>{{ warehouse.name }}</h1>
    <div class="fridges">
      <div v-for="fridge in warehouse.fridges" :key="fridge.id" class="fridge">
        <h2>{{ fridge.name }} (使用率: {{ getFridgeUsage(fridge) }}%)</h2>
        <div class="shelves">
          <div v-for="shelf in fridge.shelves" :key="shelf.id" class="shelf">
            <h3>{{ shelf.name }} (使用率: {{ getShelfUsage(shelf) }}%)</h3>
            <div class="racks">
              <div v-for="(rack, index) in shelf.rack" :key="index" class="rack">
                <h4>{{ rack.name }} (使用率: {{ getRackUsage(rack) }}%)</h4>
                <div class="holes">
                  <div v-for="(hole, index) in rack.holes" :key="index" :class="['hole', { occupied: hole.occupied }]" @mouseover="holeHovered(hole)" @mouseleave="holeLeft(hole)">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Hole {
  occupied: boolean;
}

interface Rack {
  name: string;
  holes: Hole[];
}

interface Shelf {
  id: number;
  name: string;
  rack: Rack[];
}

interface Fridge {
  id: number;
  name: string;
  shelves: Shelf[];
}

interface Warehouse {
  name: string;
  fridges: Fridge[];
}

// 计算冰箱使用率
const getFridgeUsage = (fridge: Fridge) => {
  const totalHoles = fridge.shelves.reduce((total, shelf) => {
    return total + shelf.rack.reduce((rTotal, rack) => rTotal + rack.holes.length, 0);
  }, 0);
  const occupiedHoles = fridge.shelves.reduce((total, shelf) => {
    return total + shelf.rack.reduce((rTotal, rack) => rTotal + rack.holes.filter(hole => hole.occupied).length, 0);
  }, 0);
  return ((occupiedHoles / totalHoles) * 100).toFixed(2);
};

// 计算层使用率
const getShelfUsage = (shelf: Shelf) => {
  const totalHoles = shelf.rack.reduce((total, rack) => total + rack.holes.length, 0);
  const occupiedHoles = shelf.rack.reduce((total, rack) => total + rack.holes.filter(hole => hole.occupied).length, 0);
  return ((occupiedHoles / totalHoles) * 100).toFixed(2);
};

// 计算试管架使用率
const getRackUsage = (rack: Rack) => {
  const totalHoles = rack.holes.length;
  const occupiedHoles = rack.holes.filter(hole => hole.occupied).length;
  return ((occupiedHoles / totalHoles) * 100).toFixed(2);
};

// 仓库数据结构
const warehouse = ref<Warehouse>({
  name: '仓库 1',
  fridges: [
    {
      id: 1,
      name: '冰箱 1',
      shelves: [
        {
          id: 1,
          name: '层 1',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 2,
          name: '层 2',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 3,
          name: '层 3',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 4,
          name: '层 4',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
      ],
    },
    {
      id: 2,
      name: '冰箱 2',
      shelves: [
        {
          id: 1,
          name: '层 1',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 2,
          name: '层 2',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 3,
          name: '层 3',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 4,
          name: '层 4',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
      ],
    },
    {
      id: 3,
      name: '冰箱 3',
      shelves: [
        {
          id: 1,
          name: '层 1',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 2,
          name: '层 2',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 3,
          name: '层 3',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
        {
          id: 4,
          name: '层 4',
          rack: Array.from({ length: 6 }, (_, i) => ({
            name: `试管架 ${i + 1}`,
            holes: Array.from({ length: 30 }, () => ({ occupied: Math.random() > 0.5 })),
          })),
        },
      ],
    },
  ],
});

// 悬停效果方法
const holeHovered = (hole: Hole) => {
  if (!hole.occupied) {
    console.log('空位悬停');
  }
};

const holeLeft = (hole: Hole) => {
  console.log('空位离开');
};
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

.warehouse {
  padding: 20px;
}

h1,
h2,
h3,
h4 {
  margin: 10px 0;
  font-size: 16px;
}

.fridges {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.fridge {
  background: linear-gradient(135deg, #00bcd4, #4caf50);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  width: calc(33.33% - 20px); /* 每行显示3个冰箱 */
  box-sizing: border-box;
  position: relative;
}

.shelves {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.shelf {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.racks {
  display: flex;
  flex-wrap: wrap; /* 横向排列并换行 */
  gap: 10px;
}

.rack {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  width: calc(33.33% - 10px); /* 每行最多显示3个试管架 */
  box-sizing: border-box;
}

.holes {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 3行10列的孔位矩阵 */
  gap: 5px;
}

.hole {
  width: 15px; /* 缩小孔位尺寸 */
  height: 15px; /* 缩小孔位尺寸 */
  background-color: #ddd;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.hole.occupied {
  background-color: #ff5722; /* 红色表示占用 */
}

.hole:hover {
  background-color: #4caf50; /* 绿色表示空位时悬停效果 */
}
</style>
